<template>
<div class="register">
  <p-back>返回登录</p-back>
  <van-form @submit="onSubmit">
    <van-field v-model="mail"
               name="mail"
               label="邮箱"
               placeholder="邮箱"
               :rules="[{ required: true, message: '请填写邮箱' }]"
               @blur="getmailValue(mail)" />
    <van-field v-model="username"
               name="uname"
               label="用户名"
               placeholder="用户名"
               :rules="[{ required: true, message: '请填写用户名' }]" />
    <van-field v-model="password"
               type="password"
               name="eUpassword"
               label="密码"
               placeholder="密码"
               :rules="[{ required: true, message: '请填写密码' }]"
               @blur="getpwdValue(password)" />
    <div class="pwd-input">
      <label for="">密码</label>
      <input type="password"
             v-model="rePassword"
             name="密码"
             label="确认密码"
             placeholder="请再次确认密码"
             class="repassword"
             @blur="getrePwdValue(rePassword)"
             >
    </div>
    <van-field name="gender"
               label="性别">
      <template #input>
        <van-radio-group v-model="gender"
                         direction="horizontal">
          <van-radio name="男">男</van-radio>
          <van-radio name="女">女</van-radio>
        </van-radio-group>
      </template>
    </van-field>    
    <van-field readonly
               clickable
               name="birthday"
               :value="birthday"
               label="生日"
               placeholder="点击选择日期"
               @click="showCalendar = true" />
    <van-datetime-picker
        v-if="showCalendar"
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirm"
      />
    <van-field v-model="tel"
               name="tel"
               label="电话"
               placeholder="电话"
               :rules="[{ required: true, message: '请填写电话' }]"
               @blur="getTel(tel)" />
    <van-field v-model="local"
               name="local"
               label="地址"
               placeholder="地址"
               :rules="[{ required: true, message: '请填写地址' }]" />
    <div style="margin: 16px;">
      <van-button round
                  block
                  type="info"
                  native-type="submit">提交</van-button>
    </div>
  </van-form>
  <van-area title="标题" :area-list="areaList" v-if="areaList"/>
</div>
</template>

<script>
import { Eecrypt } from '@/utils/aesEncryption'
import  PBack from '@/components/back.vue'
import { register } from '@/api.js'
import { Notify,Toast } from 'vant'
export default {
  components:{
    PBack
  },
  props:['areaList'],
  data () {
    return {
      username: '',
      password: '',
      rePassword: '',
      mail: '',
      gender: '男',
      uploader: [],
      birthday: '',
      showCalendar: false,
      tel: '',
      local: '',
      minDate: new Date(1930, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
      date:''

    };
  },
  methods: {
    getmailValue(mail) {
      const emailReg = /^[a-zA-Z0-9_]{2,16}@[a-zA-Z0-9]{2,16}\.com$/ //邮箱最少两位，最多十六位；可以使用26喂字母大小写和下划线；邮箱名最少两位，最多十六位
      if(!emailReg.test(mail)){
       Notify("邮箱输入格式错误")
      }
    },
    getpwdValue(password) {
      const passwordReg = /^[a-zA-Z0-9_#$.]{2,16}$/ 
      if(!passwordReg.test(password)){
        Notify('密码输入不合法')
      }
    },
    getrePwdValue(rePassword) {
      if(rePassword !== this.password){
        Notify('两次密码输入不一致')
      }
    },
    getTel(tel) {
      const telReg = /^1\d{10}$/
      if(!telReg.test(tel)) {
        Notify('电话格式不对')
      }
    },
    formatDate(date) {
      return `${date.getYear()+1900}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm (date) {
      this.date = date
      this.birthday = this.formatDate(date)
      this.showCalendar = false;
    },
    async onSubmit (values) {
      let params = new URLSearchParams()
          params.append('mail',this.mail)
          params.append('upassword',Eecrypt(this.password))
          params.append('uname',this.username)
          params.append('gender',this.gender)
          params.append('tel',this.tel)
          params.append('local',this.local)
          params.append('birthday',this.birthday)
          try{
            const { success } = await register(params)
                if(success) {
                    Toast.clear()
                    Toast({
                        message:'注册成功',
                        icon:'smile-o'
                    })
                    localStorage.setItem('user',JSON.stringify(this.mail))
                    this.$router.push('/index')
                }  
            } catch(err){
                Toast.clear()
                Notify('注册失败');     
          }                 
        }
  },
};
</script>
<style lang="less" scoped>
.register{
  overflow:hidden;
  .back{
  position: fixed;
  width: 100%;
  z-index: 999;
  background: white;
}
  /deep/.van-form{
    margin-top: 1.5rem;
    .pwd-input {
      margin:0 0.5rem;
      border-bottom: 1px solid #cbcdd127;
      .repassword {
        color: #c5c9d4d2;
        height: 1.5rem;
        margin-left: 1.8rem;
      }
    }
  }
}


</style>